<template>
  <ContentWrap>
    <el-row type="flex" :gutter="24">
      <el-col :span="10">
        <ContainerTitle title="质检内容">
          <List :column="2" default-value="--" sep="：">
            <ListItem label="受检人" :value="`${insData.litigantName}(${insData.litigant})`" />
            <ListItem label="所属业务组" :value="insData.litigantBusinessGroupName" />
            <ListItem label="通话记录编号" :span="24" :value="insData.callCode">
              <div slot="content" :class="[$style.callCode, 'custom-list-item']">
                <span class="label-style" style="width: auto; position: relative; padding-right: 4px;">通话记录编号<span>：</span></span>
                <span>{{ insData.callCode }}</span>
                <PhonePlay ref="phonePlay" :voice="callRecord" :step-time="5" show-btn style="margin-left: 10px;"></PhonePlay>
              </div>
            </ListItem>
            <ListItem label="联系电话" :value="callRecord.customerPhone" />
            <ListItem label="呼叫类型" dict-type-code="CALL_TYPE" :value="insData.callType" />
            <ListItem label="通话时长" :value="callRecord.talkTime" />
            <ListItem label="工单编号" :span="24" :value="insData.workOrderCode" :value-class-name="`table-click-text ${$style.valueClassName}`" @click="toWorkOrderHandle(insData.workOrderCode)" />
            <ListItem label="一级业务类型" :value="insData.businessType1Name" />
            <ListItem label="二级业务类型" :value="insData.businessType2Name" />
            <ListItem label="满意度" dict-type-code="SATISFACTION" :value="callRecord.satisfaction" />
            <ListItem label="顾客评价" dict-type-code="EVALUATE_STAFF" :value="callRecord.evaluateType" />
          </List>
        </ContainerTitle>
        <ContainerTitle title="质检结果" style="margin-top:10px">
          <List :column="3" default-value="--" sep="：">
            <ListItem label="是否微笑服务" :value="insData.isSmile===0?'否':insData.isSmile===1?'是':''" />
            <ListItem label="等级" :value="getDictName(insData.level, lelveList)" />
            <ListItem label="质检得分" :value="insData.score" />
            <ListItem label="标记典型" :span="24" :value="insData.typicalType===1?'正面':insData.typicalType===2?'负面':''" />
            <ListItem label="标记典型原因" :span="24" :value="insData.typicalCause" />
          </List>
        </ContainerTitle>
        <ContainerTitle v-if="isAllege" title="申诉结果" style="margin-top:10px">
          <List :column="2" default-value="--" sep="：" style="margin-bottom:5px">
            <ListItem label="申诉原因" :span="24" :value="insData.appealCause" />
            <ListItem label="是否微笑服务" :value="insData.appealIsSmile===0?'否':insData.appealIsSmile===1?'是':''" />
            <ListItem label="等级" :value="getDictName(insData.appealLevel, lelveList)" />
            <ListItem label="质检得分" :value="insData.appealScore" />
            <ListItem label="标记典型" :span="24" :value="insData.appealTypicalType===1?'正面':insData.appealTypicalType===2?'负面':''" />
            <ListItem label="标记典型原因" :span="24" :value="insData.appealTypicalCause" />
          </List>
        </ContainerTitle>
      </el-col>
      <el-col :span="14">
        <div :class="$style.paperWrap">
          <el-scrollbar>
            <div :class="$style.container">
              <Preview :id="questionnaireId" :results="insData.results" :is-allege="isAllege" is-preview :btn-show="false" :editable="false"></Preview>
            </div>
          </el-scrollbar>
        </div>
      </el-col>
    </el-row>
  </ContentWrap>
</template>
<script>
import { List, ListItem } from '@/components/List'
import ContentWrap from '@/components/ContentWrap'
import ContainerTitle from '../../components/containerTitle'
import Preview from '../../components/preview'
import PhonePlay from '@/components/PhonePlay'
import { lelveList, smileStateList, modelList } from '../../common'
import { qualityCheckTaskDetail, qualityCheckProjectDetail } from '@/api/inspection'
import { getCallRecordByCallCode } from '@/api/telRecord'
export default {
  name: 'PreviewEvalScore',
  components: {
    List,
    ListItem,
    ContentWrap,
    ContainerTitle,
    Preview,
    PhonePlay
  },
  props: {
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      insData: {},
      questionnaireId: '',
      formData: {
        isSmile: '',
        level: '',
        typicalType: '',
        score: '',
        typicalCause: ''
      },
      formRules: {

      },
      results: [], // 质检表结果
      callRecord: {}, // 通话信息
      disabled: true,
      smileStateList,
      lelveList,
      modelList
    }
  },
  computed: {
    isAllege() {
      return this.$route.query.allege !== undefined
    }
  },
  created() {
    this.getInsData()
  },
  methods: {
    // 工单详情页
    toWorkOrderHandle(workOrderNo) {
      if (!workOrderNo) {
        this.$message.error('没有工单编号！')
        return
      }
      this.$router.push({ name: 'QueryOrderDetails', query: { workOrderNo, form: 'any' }})
    },
    // 获取详情
    getInsData() {
      qualityCheckTaskDetail(this.id).then(res => {
        this.insData = res.data
        // 获取通话信息
        if (res.data.callCode) {
          getCallRecordByCallCode(res.data.callCode).then(res => {
            if (res.data.records.length > 0) {
              this.callRecord = res.data.records[0]
            }
          }).catch(() => {
            this.$message.error('获取通话信息失败！')
          })
        }
        // 获取问卷id
        return qualityCheckProjectDetail(this.insData.projectId).then(res => {
          this.questionnaireId = res.data.questionnaireId
        }).catch(() => {
          this.$message.error('获取质检表失败！')
        })
      })
    },
    getDictName(dictCode, list) {
      return this.$getNameByDataDict(dictCode, list)
    }
  }
}
</script>
<style lang="scss" module>
.btn{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.paperWrap{
  border: 1px solid #eee;
  border-radius: 8px;
  height: 100%;
}
.container{
  padding-top: 10px;
  max-height: 700px;
}
.valueClassName{
  color: #11A265 !important;
}
.callCode{
  align-items: center;
}
</style>
